<template>
  <!-- 顶部菜单栏 -->
  <TheMenu v-if="isNotLoginView && reloadView"/>
  <!-- 路由页面 -->
  <RouterView v-if="reloadView"/>
  <!-- 回到顶部按钮 -->
  <el-backtop :right="30" :bottom="40"/>
  <!-- 页脚 -->
  <TheFooter v-if="isNotLoginView && isNotShowFooter"/>
</template>

<script setup>
import { RouterView, useRouter } from 'vue-router'
import { ref, computed, onMounted, nextTick, provide } from 'vue';
import TheMenu from './components/TheMenu.vue'
import TheFooter from './components/TheFooter.vue';
import { useStore } from './stores';
import { ElMessage } from 'element-plus';

// 登录和注册页面不显示菜单和页脚
const router = useRouter()
let isNotLoginView = computed(() => {
  return router.currentRoute.value.name !== 'login' && router.currentRoute.value.name !== 'register'
})
// 文章编辑界面 和 聊天界面 不显示页脚
let isNotShowFooter = computed(() => {
  return router.currentRoute.value.name !== 'editblog' && router.currentRoute.value.name !== 'chat'
})

// 检测localStorage登录状态
onMounted(() => {
  if (localStorage.getItem('userState') != null) {
    const store = useStore()
    store.initStore(JSON.parse(localStorage.getItem('userState')))
    //  ------------!!!暂时废弃!!!------------
    // 登录问候
    // ElMessage({
    //   message: '早上好！' + store.name,
    //   type: 'success',
    // })
    //  ------------!!!暂时废弃!!!------------
  }
})

// reload 刷新页面方法 只刷新RouterView和TheMenu
const reloadView = ref(true)
const reload = () => {
  reloadView.value = false
  nextTick(() =>{
    reloadView.value = true
  })
}
// 将reload方法传递给子组件
provide('Reload', reload)
</script>

<style>
</style>